<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客主页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">

	<script src="js/jquery.min.js"></script>
	<script src="js/logout.js"></script>
	<script src="js/urlutils.js"></script>
</head>
<body>
    <div class="nav">
        <div class="flag">
            <img src="image/face2.png" alt="logo">
            <div class="title">我的博客系统</div>
        </div>

        <div class="page">
            <a href="blog_list.html">主页</a>
			<a href="myblog_list.html">内容管理</a>
            <a href="blog_add.html">写博客</a>
            <a href="javascript:logout()">注销</a>
        </div>
    </div>
    
    <div class="containerX">
		<div class="rightX">
			<div id="blog_list">

			</div>
<!--            <div class="blog">
                <h3>我的第一篇博客</h3>
                <div class="date">2022-4-26 14:22:00</div>
                <div class = "desc">编程之路，道阻且长。Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                    Quas eaque, blanditiis sunt praesentium ullam laudantium esse odit assumenda 
                    commodi molestias illo provident quis nisi, veritatis pariatur! Commodi rerum 
                    vitae beatae.
                </div>
                <a href="blog_detail.html?blogId=1">查看全文 &gt;&gt;</a>
            </div> -->

			<hr>
			<div class="blog-pagnation-wrapper">
				<button class="blog-pagnation-item" onclick="tofirst()">首页</button> 
				<button class="blog-pagnation-item" onclick="tobefore()">上一页</button>
				<span id="pindex">1</span>/<span id="pcount">1</span>
				<button class="blog-pagnation-item" onclick="tonext()">下一页</button>
				<button class="blog-pagnation-item" onclick="tolast()">末页</button>
			</div>
        </div>
    </div>
	<script>
	        // 初始化页面
	        var pSize = 3; // 每页显示条数
	        var pIndex = 1 // 页码
	        var pageCount = 1 // 总页数
	        function init() {
	            // 1.处理分页参数
	            pIndex = getParamValue("pIndex");
	            if (pIndex == null) {
	                pIndex = 1;
	            }
	            pSize = getParamValue("pSize");
	            if (pSize == null) {
	                pSize = 3;
	            }
	            jQuery("#pindex").html(pIndex);
	            // 2.向后端请求数据
	            jQuery.ajax({
	                url:"/art/getlistbypage",
	                type:"GET",
	                data:{
	                    "pIndex":pIndex,
	                    "pSize":pSize
	                },
	                // 3.将结果返回给用户
	                success:function(res){
	                    if (res.code == 200 && res.data != null) {
	                        // 获取数据成功
	                        var createHtml = "";
	                        if (res.data.articles != null || res.data.articles.length > 0) {
	                            // 文章列表不为空
	                            pageCount = res.data.pageCount;
	                            jQuery("#pcount").html(pageCount);
	                            var artlist = res.data.articles;
	                            for(var i=0;i<artlist.length;i++){
	                                var art = artlist[i]; // 文章对象
	                                createHtml += '<div class="blog" >';
	                                createHtml += '<h3>'+art.title+'</h3>';
	                                createHtml += '<div class="date">'+art.createtime+'</div>';
	                                createHtml += '<div class="desc">'+art.content+'</div>';
	                                createHtml += '<div class="view">';
	                                createHtml += '<a href="blog_content.html?aid='+
	                                    art.id+'" class="detail">查看全文 &gt;&gt;</a>';
	                                createHtml += '</div>';
	                                createHtml += '</div>';
	                            }
	                        } else {
	                            // 文章列表为空
	                            createHtml += "<h3 style='text-align: center; margin-top:10px'>暂无文章</h3>";
	                        }
	                        jQuery("#blog_list").html(createHtml);
	                    } else {
	                        alert("查询失败:"+res.meg);
	                    }
	                }
	            });
	
	        }
	        init();
	
	        // 点击首页
	        function tofirst(){
	            // 1.判断是否在首页
	            if (pIndex == 1) {
	                // 无需跳转，已经在首页了
	                return false;
	            }
	            // 2.跳转到首页
	            location.href = "blog_list.html";
	        }
	        // 点击末页
	        function tolast(){
	            // 1.判断是否在末页
	            if (pIndex == pageCount) {
	                // 无需跳转，已经在末页了
	                return false;
	            }
	            // 2.跳转到末页
	            location.href = "blog_list.html?pIndex="+pageCount;
	        }
	        // 点击下一页
	        function tonext(){
	            // 1.判断是否在末页
	            if (pIndex == pageCount) {
	                // 无需跳转，已经在末页了
	                return false;
	            }
	            // 2.跳转到下一页
	            location.href = "blog_list.html?pIndex="+(parseInt(pIndex)+1);
	        }
	        // 点击上一页
	        function tobefore(){
	            // 1.判断是否在首页
	            if (pIndex == 1) {
	                // 无需跳转，已经在末页了
	                return false;
	            }
	            // 2.跳转到上一页
	            location.href = "blog_list.html?pIndex="+(parseInt(pIndex)-1);
	        }
	
	    </script>
</body>
</html>